require(['./config'], () => {
    require(['template', 'header', 'footer','jquery'], (template,header) => {
        class Cart {
            constructor() {
                this.prodList = []//存储localstorag里的信息
                this.allCount = 0//总数
                this.allPrice = 0//总价
                this.checked = true // 是否全选
                this.init() //获取数据渲染页面
            }
            init() {
                
                // 获取 localStorage 数据 prodList
                const prodList = localStorage.getItem('prodList')
                if (prodList) {
                    this.prodList = JSON.parse(prodList)
                    // 渲染页面
                    $('.mycart_list tbody').html(template('cartTemplate', { list: this.prodList }))
                } else {
                    alert('您的购物车没有商品请先去购物')
                    location.href = 'http://localhost:2101'
                }
                this.checkAllState()
                this.computedAll()
                this.delProd()
                this.bindEvent()
                this.selectAll()
            }
            // 计算总量和总价
            computedAll() {
                this.allCount = 0
                this.allPrice = 0
                this.prodList.forEach(item => {
                    if (item.checked) {
                        // 选中
                        this.allCount += item.count
                        this.allPrice += item.price * item.count
                    }
                })
                $('#sum_count').text(this.allCount)
                $('#sum_price').text(this.allPrice.toFixed(2))
            }
            // 删除商品
            delProd() {
                const that = this
                $('.del').click(function () {
                    // 获取 tr 拿到商品的 id 再去 this.prodList 找到相对应的数据 删除 重新渲染页面
                   
                    const id = $(this).parent().attr('prodId') - 0
                    // console.log(id)
                    for (let i = 0; i < that.prodList.length; i++) {
                        if (that.prodList[i].id === id) {
                            that.prodList.splice(i, 1)
                            break
                        }
                    }
                    // 重新存一下 localStorage 然后渲染页面
                    localStorage.setItem('prodList', JSON.stringify(that.prodList))
                    that.init()
                    header.changeCount()
                })
            }
            // 改变数量
            bindEvent(){
                const that = this
                $(".tb_jian").click(function(){
                    that.changeCount('jian',this)
                })
                $(".tb_jia").click(function(){
                    that.changeCount('jia',this)
                })
            }
            changeCount(str,sjy){
                // 获取 tr 
                const id = $(sjy).parent().parent().attr('prodId') - 0
                for(let i = 0 ; i < this.prodList.length ; i++){
                    if(this.prodList[i].id === id){
                        if(str ==='jian'){
                            if(this.prodList[i].count > 1){
                                this.prodList[i].count--
                            }
                        }else{
                            this.prodList[i].count++
                        }
                        break
                    }
                }
                // 重新存 localStorage 渲染页面
                localStorage.setItem('prodList',JSON.stringify(this.prodList))
                this.init()
                header.changeCount()
            }

            // 全选
            selectAll(){
                const that = this
                $('.checkAll')[0].onclick = function(){
                    $(this).toggleClass('active')
                    // 判断它有没有这个类名
                    that.checked = $(this).hasClass('active')
                    // 数组里面的每一条数据和 that.checked 保持一致  重新渲染页面
                    for(let i = 0 ; i < that.prodList.length ; i++){
                        that.prodList[i].checked = that.checked
                    }
                    localStorage.setItem('prodList',JSON.stringify(that.prodList))
                    that.init()
                    header.changeCount()
                }
                const btns = document.querySelectorAll('td .check')
                for(let i = 0 ; i < btns.length ; i++){
                    btns[i].onclick = function(){
                        // 1、把数组里面对应的这条数据选中状态取反
                        that.prodList[i].checked = !that.prodList[i].checked
                        // 2、存 localStorage 渲染页面
                        localStorage.setItem('prodList',JSON.stringify(that.prodList))
                        that.init()
                        // 3、判断数组的每一项是否都选中
                        that.checkAllState()
                        header.changeCount()
                    }
                }
            }
            checkAllState(){
                this.checked = this.prodList.every(item => {
                    return item.checked
                })
                this.checked  ? $('.checkAll').addClass('active') : $('.checkAll').removeClass('active')
            }
            
        }
        return new Cart()
    })
})